<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 引入Vue -->
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <!-- 准备好一个容器 -->
    <div id="root">
        <h2>当前n值是{{n}}</h2>
        <button @click="add">n+1</button>
        <button @click="bye">点我销毁vm</button>
    </div>
</body>
<script type="text/javascript">
    Vue.config.productionTip = false; //阻止vue在启动时产生产提示
    let vm = new Vue({
        el: '#root',
        // es6模板语法，反引号定义模板字符串，可以用单引号但要写一行，只能有一个根元素，会替换掉root
        // template:`   
        // <div>
        //     <h2>当前n值是{{n}}</h2>
        //     <button @click="add">n+1</button>    
        // </div>     `,
        data() {
            return {
                n: 1
            }
        },
        methods: {
            add() {
                this.n++
            },
            bye(){
                console.log('bye');
                this.$destroy()
            }
        },
        beforeCreate() {
            console.log('beforeCreate');
            // console.log(this);
            // debugger
        },
        created() {
            console.log('created');
            // console.log(this);
            // debugger
        },
        beforeMount() {
            console.log('beforeMount');
            // console.log(this);
            // debugger
        },
        mounted() {
            console.log('mounted');
            // console.log(this);
            // debugger
        },
        beforeUpdate() {
            console.log('beforeUpdate');
            // console.log(this);
            // debugger
        },
        updated() {
            console.log('beforeUpdate');
            // console.log(this);
            // debugger
        },
    })
</script>

</html>